<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 400px;
      height: 400px;
      border: 1px solid;
      margin: 100px;
    }
    button {
      width: 20px;
      height: 20px;
      background-color: aquamarine;
	  color: #000;
	  text-align: center;
	  line-height: 20px;
	  border-color: #fff;
    }
    input {
      width: 100px;
      height: 20px;
      border: 1px solid skyblue;
      outline: none;
	  vertical-align: top;
    }
  </style>
  <script>
    function add() {
      var input1 = Number(document.getElementById("inputCon1").value);
	  var input2 = Number(document.getElementById("inputCon2").value);
      document.getElementById("demo").innerHTML = input1 + input2;
    }
	function minus() {
      var input1 = Number(document.getElementById("inputCon1").value);
	  var input2 = Number(document.getElementById("inputCon2").value);
      document.getElementById("demo").innerHTML = input1 - input2;
    }
	function ride() {
      var input1 = Number(document.getElementById("inputCon1").value);
	  var input2 = Number(document.getElementById("inputCon2").value);
      document.getElementById("demo").innerHTML = input1 * input2;
    }
	function except() {
      var input1 = Number(document.getElementById("inputCon1").value);
	  var input2 = Number(document.getElementById("inputCon2").value);
      document.getElementById("demo").innerHTML = Math.round(input1 / input2 *100)/100;
    }

    
  </script>
  <body>
    <div>
      <input id="inputCon1" type="text" value="" />
	  <input id="inputCon2" type="text" value="" />
      <button type="button1" onclick="add()">+</button>
	  <button type="button2" onclick="minus()">-</button>
	  <button type="button3" onclick="ride()">*</button>
	  <button type="button4" onclick="except()">/</button>
	  <p id="demo">结果</p>
    </div>
  </body>
</html>
